<template>
	<movable-area :style="areaStyle">
		<movable-view class="float-action-button" direction="all" :x="left" :y="top">
			<view class="actions-container">
				<transition name="fab-actions-appear" :enter-active-class="transitionEnter"
					:leave-active-class="transitionLeave">
					<view class="fab-list">
						<block v-for="(item, idx) in 4" :key="item">
							<button class="fab-item" v-if="idx < defaultShow">
								<u-icon name="plus"></u-icon>
							</button>
							<transition v-else enter-active-class="animated quick zoomIn"
								leave-active-class="animated quick zoomOut">
								<button class="fab-item" v-if="show">
									<u-icon name="plus"></u-icon>
								</button>
							</transition>
						</block>
					</view>
				</transition>
			</view>
			<button :class="`fab-main ${show ? '' : 'collapsed'}`" @click="toggle">
				<u-icon class="icon" name="plus"></u-icon>
				<text>更多</text>
			</button>
		</movable-view>
	</movable-area>
</template>

<script>
	const POSITION_KEY = 'FLOAT-ACTION-BUTTON-POISIOTN'
	
	export default {
		name: 'FloatActionButton',
		props: {
			size: {
				type: Number,
				default: 90, // rpx
			},
			defaultShow: {
				type: Number,
				default: 3
			}
		},
		computed: {
			areaStyle() {
				return {
					position: "fixed",
					left: 0,
					top: 0,
					width: '100vw',
					height: '100vh'
				}
			},
			style() {
				const {
					rectangle,
					left = 0,
					top = 0
				} = this
				const bottom = rectangle.windowHeight - (top + this.size)
				return `left:${left}px; bottom:${bottom}px`
			},
			transitionEnter() {
				let animation = this.animation;
				return animation.enter;
			},
			transitionLeave() {
				let animation = this.animation;
				return animation.leave;
			},
			animation() {
				return {
					enter: 'animated fadeInUp',
					leave: 'animated fadeOutDown'
				};
			},
		},
		data() {
			return {
				rectangle: {},
				left: 1024,
				top: 1024,
				show: false,
				actions: [],
			}
		},
		mounted() {
			this.getPosition()
		},
		methods: {
			getRectangle() {
				const systemInfo = uni.getSystemInfoSync()
				const windowWidth = systemInfo.windowWidth
				const windowHeight = systemInfo.windowHeight
				const buttonSize = Math.round((windowWidth * this.size) / 750)
				const margin = 15
				const right = windowWidth - margin - buttonSize
				const bottom = windowHeight - (64 + margin) - buttonSize

				this.setData({
					rectangle: {
						left: margin,
						top: margin,
						right: right,
						bottom: bottom,
						windowWidth: windowWidth,
						windowHeight: windowHeight,
						buttonSize: buttonSize,
						margin: margin,
					},
				})
			},

			getPosition() {
				const position = uni.getStorageSync(POSITION_KEY)
				this.getRectangle()
				let left = this.rectangle.right
				let top = this.rectangle.bottom
				if (position) {
					left = position.left
					top = position.top
				}
				this.setData({
					left: left,
					top: top,
				})
			},

			setData(data) {
				Object.assign(this, {
					...data,
				})
			},

			toggle() {
				this.show = !this.show;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.float-action-button {
		position: relative;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		height: 100rpx;
	}

	.float-action-button .actions-container {
		position: absolute;
		left: 0;
		bottom: 100%;
		z-index: 0;
	}

	.fab-main {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 100rpx;
		padding: 0;
		border-radius: 100rpx;
		box-shadow: 0 6rpx 6rpx rgba(0, 0, 0, 0.20), 0 3rpx 3rpx rgba(0, 0, 0, 0.15);
		z-index: 2;

		.icon {
			margin-bottom: 6rpx;
			transform: rotate(45deg);
			transition: all 0.3s ease-in;
		}

		text {
			font-size: 20rpx;
			line-height: 1;
		}

		&.collapsed {
			.icon {
				transform: rotate(0);
			}
		}
	}

	.fab-list {
		position: relative;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 1;
	}

	.fab-list .fab-item {
		margin-top: 20rpx;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 100rpx;
		padding: 20rpx;
		border-radius: 100rpx;
		box-shadow: 0 6rpx 6rpx rgba(0, 0, 0, 0.20), 0 3rpx 3rpx rgba(0, 0, 0, 0.15);
	}

	.animated {
		animation-duration: 1s;
		animation-fill-mode: both
	}

	.animated.quick {
		animation-duration: .3s !important;
	}

	@keyframes fadeInUp {
		0% {
			opacity: 0;
			transform: translate3d(0, 100%, 0)
		}

		to {
			opacity: 1;
			transform: none
		}
	}

	.fadeInUp {
		animation-name: fadeInUp
	}

	@keyframes fadeOutDown {
		0% {
			opacity: 1
		}

		to {
			opacity: 0;
			transform: translate3d(0, 100%, 0)
		}
	}

	.fadeOutDown {
		animation-name: fadeOutDown
	}

	@keyframes zoomIn {
		0% {
			opacity: 0;
			transform: scale3d(.3, .3, .3)
		}

		50% {
			opacity: 1
		}
	}

	.zoomIn {
		animation-name: zoomIn
	}

	@keyframes zoomOut {
		0% {
			opacity: 1
		}

		50% {
			transform: scale3d(.3, .3, .3)
		}

		50%,
		to {
			opacity: 0
		}
	}

	.zoomOut {
		animation-name: zoomOut
	}
</style>
